<template>
  <div style="height: 100%">
    <div v-for="item in widgetList" :key="item.type">
      <ElDivider>{{ item.name }}</ElDivider>
      <Draggable
        :clone="cloneWidget"
        :group="{ name: 'dragGroup', pull: 'clone', put: false }"
        :sort="false"
        :list="item.children"
        item-key="type"
        tag="ul"
      >
        <template #item="{ element: ctn }">
          <li :key="ctn.type" :title="ctn.name" style="display: inline-block; list-style-type: none; text-align: center">
            <div class="widget-item">
              <Icon :icon="ctn.icon" size="32px" color="#66c0b8"></Icon>
            </div>
            <div>{{ ctn.name }}</div>
          </li>
        </template>
      </Draggable>
    </div>
  </div>
</template>

<script setup lang="ts" name="WidgetPanel">
import { ref } from "vue";
import { ElDivider } from "element-plus";
import Draggable from "@/components/Draggable";
import { Icon } from "@/components/Icon";
import { deepClone, generateId } from "../../../util/common";
import widgetJson from "./widget.json";
const widgetList = ref(widgetJson);
const cloneWidget = widget => {
  const newWidget = deepClone(widget);
  const tempId = generateId();
  newWidget.id = newWidget.type + tempId;
  return newWidget;
};
</script>

<style scoped>
ul {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

.widget-item {
  display: inline-block;
  height: 32px;
  width: 32px;
  padding: 10px;
  margin: 10px;
  cursor: move;
  text-align: center;
  text-overflow: ellipsis;
  border-radius: 10px;
  border: 1px solid gainsboro;
  box-sizing: content-box;
}

.widget-item:hover {
  background-color: #efefef;
}
</style>
